<template>
  <div id="app">
    <nprogress-container></nprogress-container>
    <mk-is-loading v-if="loading" title="世外生活运营平台"></mk-is-loading>
    <el-container class="main-container" v-if="!loading">
      <el-aside :width="asideWidth + 'px'" :class="{'hover-show': isHoverShow}"
                @mouseover.native="showMenu" @mouseleave.native="hideMenu">
        <div class="logo">
          <img src="./assets/logo.png" height="57" width="54" alt=""/>
          <span class="logo-title">世外生活运营平台</span>
        </div>
        <mk-menu :aside-width="asideWidth" :bodyHeight="bodyHeight" :resources="[]" backgroundColor="#1c2b36"
                 activeTextColor="#3bc0c3">
          <template slot="menuTop">
            <el-submenu index="/">
              <template slot="title">
                <i class="menu-icon"><i class="customer-icon"></i></i>
                <span class='menu-name' slot="title">客户</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/">商城客户</el-menu-item>
                <el-menu-item index="/propertyCustomer">物业客户</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/productMgt">
              <template slot="title">
                <i class="menu-icon"><i class="product-icon"></i></i>
                <span class='menu-name' slot="title">商品</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/productMgt">商品列表</el-menu-item>
                <el-menu-item index="/productCategory">商品分类</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/serveCategory">
              <template slot="title">
                <i class="menu-icon"><i class="service-icon"></i></i>
                <span class='menu-name' slot="title">服务</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/serveCategory">服务分类</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/orderListMgt">
              <template slot="title">
                <i class="menu-icon"><i class="order-icon"></i></i>
                <span class='menu-name' slot="title">订单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/orderListMgt">订单列表</el-menu-item>
                <el-menu-item index="/orderAuditMgt">订单审核</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/withdrawDeposit">
              <template slot="title">
                <i class="menu-icon"><i class="pay-icon"></i></i>
                <span class='menu-name' slot="title">结算</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/withdrawDeposit">提现申请</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/assessList">
              <template slot="title">
                <i class="menu-icon"><i class="assess-icon"></i></i>
                <span class='menu-name' slot="title">评价</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/assessList">商品评价</el-menu-item>
                <el-menu-item index="/recycleList">评价回收站</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/siteMgt">
              <template slot="title">
                <i class="menu-icon"><i class="site-icon"></i></i>
                <span class='menu-name' slot="title">站点</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/siteMgt">地区站点</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/bannerMgt">
              <template slot="title">
                <i class="menu-icon"><i class="operation-icon"></i></i>
                <span class='menu-name' slot="title">运营</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/operationMgt/singlePage">单页面</el-menu-item>
                <el-menu-item index="/bannerMgt">Banner管理</el-menu-item>
                <el-menu-item index="/homePageMgt">首页分类</el-menu-item>
                <el-menu-item index="/operationMgt/articleMgt">文章管理</el-menu-item>
                <el-menu-item index="/operationMgt/activityMgt">活动管理</el-menu-item>
                <el-menu-item index="/message">短信充值</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="/neighbourCircle">
              <template slot="title">
                <i class="menu-icon"><i class="circle-icon"></i></i>
                <span class='menu-name' slot="title">邻里圈</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/neighbourCircle">邻里圈管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="/doctorList">
              <template slot="title">
                <i class="menu-icon"><i class="doctor-icon"></i></i>
                <span class='menu-name' slot="title">名医</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/doctorList">名医列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </template>
        </mk-menu>
      </el-aside>

      <el-main :class="{'add-padding': isHoverShow}" id="mainContent">
        <keep-alive exclude="addArticle,addSinglePage">
          <router-view></router-view>
        </keep-alive>
      </el-main>

    </el-container>
  </div>
</template>

<script>
  import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
  import {mapState} from 'vuex'
  export default {
    name: 'app',
    components: {
      NprogressContainer,
    },
    data () {
      return {
        loading: true,
        asideWidth: 60,
        isHoverShow: false,
        timer: null
      }
    },
    watch: {
      bodyWidth: function (value) {
        if (value < 1680) {
          this.asideWidth = 60;
        } else {
          this.asideWidth = 260;
        }
      }
    },
    computed: mapState({
      bodyWidth: state => state.global.bodyWidth,
      bodyHeight: state => state.global.bodyHeight,
    }),
    mounted: function () {

      this.$store.dispatch('loadCurrentStaff').then(() => {
        this.loading = false;
      });

      this.$store.dispatch('loadBodySize').then(() => {
        if (this.bodyWidth < 1680) {
          this.asideWidth = 60;
        } else {
          this.asideWidth = 260;
        }
      });
      if (window.addEventListener) {
        window.addEventListener('resize', () => {
          this.$store.dispatch('loadBodySize');
        });
      } else {
        window.attachEvent('onresize', () => {
          this.$store.dispatch('loadBodySize');
        })
      }
    },

    methods: {

      showMenu() {
        if (this.bodyWidth < 1680 && this.asideWidth == 60) {
          clearTimeout(this.timer);
          this.asideWidth = 260;
          this.isHoverShow = true;
        }
      },

      hideMenu() {
        if (this.bodyWidth < 1680 && this.asideWidth == 260) {
          this.asideWidth = 60;
          this.timer = setTimeout(() => {
            this.isHoverShow = false;
          }, 300);
        }
      }
    }

  }
</script>

<style lang="less">
  @import './assets/style/publicStyle.less';

  * {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "微软雅黑", "Hiragino Sans GB", "PingFang SC";
    font-size: 14px;
  }

  html, body, #app, .main-container {
    height: 100%;
    overflow: hidden;

  }

  .menu-icon {
    .customer-icon {
      background-image: url("./assets/img/menu-customer.png");
    }
    .product-icon {
      background-image: url("./assets/img/menu-product.png");
    }
    .service-icon {
      background-image: url("./assets/img/menu-service.png");
    }
    .order-icon {
      background-image: url("./assets/img/menu-order.png");
    }
    .assess-icon {
      background-image: url("./assets/img/menu-assess.png");
    }
    .pay-icon {
      background-image: url("./assets/img/menu-pay.png");
    }
    .site-icon {
      background-image: url("./assets/img/menu-site.png");
    }
    .operation-icon {
      background-image: url("./assets/img/menu-operation.png");
    }
    .doctor-icon {
      background-image: url("./assets/img/menu-doctor.png");
    }
    .circle-icon{
      background-image: url("./assets/img/menu-circle.svg");
    }
  }

  .main-container {
    /*min-width: 1280px;*/
    .el-aside {
      background-color: @menuBackColor1;
      height: 100%;
      transition: all .3s;
      overflow-x: hidden;
    }
    .el-header {
      .my-box-shadow(0 1px 4px rgba(0, 0, 0, 0.10));
      padding: 0;
    }
    .el-main {
      padding: 0;
      background-color: @borderColor;
    }
    .logo {
      margin-bottom: 20px;
      padding: 15px 5px 7px 5px;
      position: relative;
      .logo-title {
        padding-left: 10px;
        width: 150px;
        font-size: 20px;
        color: @primaryColor;
        line-height: 80px;
        white-space: nowrap;
        position: absolute;
        top: 0;
        left: 60px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
      }
    }
    .hover-show {
      position: fixed;
      z-index: 3000;
    }
    .add-padding {
      padding-left: 60px;
    }
  }

  .nprogress-container {
    position: fixed !important;
    width: 100%;
    height: 50px;
    z-index: 2048;
    pointer-events: none;

    #nprogress {
      .bar {
        background: #3bc0c3;
      }
      .peg {
        box-shadow: 0 0 10px #3bc0c3, 0 0 5px #3bc0c3;
      }
      .spinner-icon {
        border-top-color: #3bc0c3;
        border-left-color: #3bc0c3;
      }
    }
  }
</style>
